<template>
  <div class="comment-line-box">
    <!-- 根评论主要内容 -->
    <div class="comment-main-content">
      <!-- 头像 -->
      <el-avatar
        icon="el-icon-user-solid"
        :size="35"
        style="width: 38px"
        :src="$store.getters.avatar"
      ></el-avatar>

      <!-- 右侧内容区域 -->
      <div class="right-box">
        <div class="new-info-box clearfix">
          <div class="comment-top">
            <div class="user-box">
              <!-- 用户名 -->
              <span class="comment-name">{{ comment.userName }}</span>

              <!-- 折叠按钮和回复数量 -->
              <span
                v-if="comment.child && comment.child.length > 0"
                class="collapse-section"
                @click="toggleCollapse"
              >
                <i
                  class="collapse-btn"
                  :class="
                    collapsed ? 'el-icon-caret-right' : 'el-icon-caret-bottom'
                  "
                ></i>
                <span class="reply-count-text"
                  >{{ comment.child.length }}条回复</span
                >
              </span>

              <!-- 如果是文章作者，显示"作者"标签 -->
              <el-tag
                size="mini"
                type="danger"
                v-show="comment.userName === blog.name"
                >作者</el-tag
              >
              <!-- 发表时间 -->
              <span class="date">{{ commentTime }}</span>
            </div>

            <!-- 操作按钮：删除、回复 -->
            <div class="opt-comment">
              <span @click="deleteComment(comment)">
                <i class="el-icon-delete"></i>
                删除
              </span>
              <span @click="showReplay = !showReplay">
                <i class="el-icon-chat-round"></i>
                回复
              </span>
            </div>
          </div>

          <!-- 评论内容 -->
          <div class="comment-center">
            <div class="new-comment">{{ comment.content }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 回复输入框 -->
    <commentReplay
      v-if="showReplay"
      :root-parent-id="
        comment.parentCommentId || comment.id || comment.commentId
      "
      :comment="comment"
      :blog-id="blog.userId || blog.id"
      :get-comment-list="getCommentList"
      @cancel-reply="closeReply"
    />

    <!-- 子评论列表 - 可折叠 -->
    <div
      class="child-comments-container"
      v-if="comment.child && comment.child.length > 0 && !collapsed"
    >
      <CommentChild
        :child-comments="comment.child"
        :parent-comment="comment"
        :blog="blog"
        :root-parent-id="comment.parentCommentId"
        :get-comment-list="getCommentList"/>
    </div>

  </div>
</template>

<script>
import CommentReplay from "./CommentReplay.vue";
import CommentChild from "./CommentChild.vue";
import "@/assets/styles/comment.css";
import { delComments } from "@/api/forum/comments";

export default {
  name: "CommentRoot",
  components: { CommentReplay, CommentChild },
  props: {
    comment: Object,
    blog: Object,
    getCommentList: Function,
  },
  data() {
    return {
      showReplay: false, // 控制是否显示回复框
      collapsed: false, // 控制子评论折叠状态
    };
  },
  mounted() {
    console.log("=====================comment:", this.comment); // 看看是不是 undefined
  },
  methods: {
    deleteComment(comment) {
      // 这里可以调用删除接口
         delComments(comment.commentId).then((response) => {
        if (response.code === 200) {
          this.$message.success("删除成功");
          this.getCommentList();
        }
      });
    },

    // 切换折叠状态
    toggleCollapse() {
      this.collapsed = !this.collapsed;
      console.log("CommentRoot 切换折叠:", this.collapsed);
    },

    // 关闭回复框
    closeReply() {
      this.showReplay = false;
    },

    // 格式化时间显示
    formatTime(timeStr) {
      if (!timeStr) return "";
      try {
        const time = new Date(timeStr);
        if (isNaN(time.getTime())) return timeStr;
        return time.toLocaleString("zh-CN", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
        });
      } catch (e) {
        return timeStr;
      }
    },
  },

  computed: {
    // 计算评论时间
    commentTime() {
      return this.formatTime(
        this.comment.createAt ||
          this.comment.createTime ||
          this.comment.createdAt
      );
    },
  },
};
</script>

